<template>
  <Modal v-model="model" title="角色设置" :width="600">
    <div class="h400 scroll">
      <Form ref="form" :model="form" :label-width="100" :rules="ruleValidate">
        <FormItem label="职能名称" prop="roleName">
          <Input v-model="form.roleName" :disabled="type === 'check'" />
        </FormItem>
        <FormItem label="职能归类" prop="roleType">
          <RadioGroup v-model="form.roleType">
            <Radio :disabled="type === 'check'" label="0">经销商</Radio>
            <Radio :disabled="type === 'check'" label="1">品牌商</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="门店数据依据" prop="roleManageType">
          <RadioGroup v-model="form.roleManageType" :disabled="btnDisabled">
            <Radio :disabled="type === 'check'" label="1">经销商</Radio>
            <Radio :disabled="type === 'check'" label="0">门店维护人</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="菜单权限">
          <Tree :data="menu" show-checkbox @on-check-change="selectTree" />
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button size="large" type="text" @click="onCancel">取消</Button>
      <Button type="primary" size="large" @click="onDone">确认</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  data () {
    return {
      type: 'add',
      id: '',
      model: false,
      form: {
        roleName: '',
        roleType: '',
        roleManageType: '',
        menuIds: []
      },
      ruleValidate: {
        roleName: { required: true, message: '请输入职能名称', trigger: 'blur' },
        roleType: { required: true, message: '请选择职能归类', trigger: 'blur' },
        roleManageType: { required: true, message: '请选择门店数据依据', trigger: 'blur' }
      },
      menu: []
    }
  },
  watch: {
    model (val) {
      if (!val) {
        this.id = ''
        this.model = false
        this.menu = []
        this.$refs['form'].resetFields()
      }
    }
  },
  methods: {
    open (id, type) {
      this.id = id
      this.type = type
      this.model = true
      this.getRoleMenuTree()
    },
    onCancel () {
      this.id = ''
      this.model = false
      this.menu = []
      this.$refs['form'].resetFields()
    },
    selectTree (arr) {
      const menuIds = []
      arr.forEach(item => {
        menuIds.push(Number(item.id))
      })
      this.form.menuIds = menuIds
    },
    getRoleMenuTree () {
      function loopTree (arr, type, menuIds) {
        let menuArr = arr.map(item => {
          let obj = {
            title: item.menuName,
            expand: !!item.child.length,
            id: item.id,
            disableCheckbox: type === 'check',
            checked: menuIds.indexOf(item.id) > -1
          }
          if (item.child.length) {
            obj.children = loopTree(item.child, type, menuIds)
          }
          return obj
        })
        return menuArr
      }
      this.$ajaxGet('/salesman/roleMenu/tree').then(async res => {
        let menuIds = []
        if (this.type !== 'add') {
          let result = await this.getDetailById(this.id)
          menuIds = result.menuIds
        }
        this.menu = loopTree(res, this.type, menuIds)
      })
    },
    getDetailById (id) {
      return this.$ajaxGet(`/salesman/role/detail/${id}`).then(res => {
        const roleTypeMap = {
          'DISTRIBUTOR': '0',
          'SUPPLIER': '1'
        }
        const roleManageTypeMap = {
          'STORE': '0',
          'DISTRIBUTOR': '1'
        }
        this.form.roleName = res.roleName
        this.form.roleType = roleTypeMap[res.roleType]
        this.form.roleManageType = roleManageTypeMap[res.roleManageType]
        this.form.menuIds = res.menuIds
        return res
      })
    },
    onDone () {
      if (this.type === 'check') {
        this.onCancel()
        return
      }
      if (!this.form.menuIds.length) {
        this.$Notice.error({
          title: '请选择菜单权限'
        })
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let param = this.form
          if (this.id) param.id = this.id
          let url = this.id ? '/salesman/role/modify' : '/salesman/role/add'
          this.$jsonPost(url, param).then(res => {
            this.$Notice.success({
              title: (this.id ? '编辑' : '新增') + '成功'
            })
            this.$emit('complete')
            this.model = false
          }).catch((res) => {
          })
        }
      })
    }
  }
}
</script>

